<template>
	<div>
		<!-- 搜索框 -->
		<pol-search :form="searchForm" :schema="schema" @search="clickSearch" class="margin-top">
			<template #CardTypeCode>
				<div class="el-input-num cursor" style="position: relative;" @click="selectJJQ">
					<el-input v-model="searchForm.CardTypeCode" placeholder="请选择结晶器浇次" size="large" readonly :suffix-icon="searchForm.CardTypeCode ? '' : 'ArrowDown'" />
					<span @click.stop="searchForm.CardTypeCode = ''" class="close-ico cursor" v-if="searchForm.CardTypeCode">
						<el-icon color="#fff">
							<Close />
						</el-icon>
					</span>
				</div>
			</template>
		</pol-search>

		<!-- QES模型 -->
		<pol-title title="QES实时监测">
			<template #right>
				<span class="text-white">当前切割炉次：20120682（制作命令号：124578）</span>
			</template>
		</pol-title>
		<div class="border-solid bg-tm radius-sm padding-lg">
			<template v-for="(item, index) in 5" :key="index">
				<sketch-map @eventListClick="eventListClick" :sketchMindex="index"></sketch-map>
			</template>
		</div>

		<!-- 质量事件列表（铸流：全部） -->
		<pol-title title="质量事件列表（铸流：全部）" class="margin-top">
			<template #left>
				<div class="padding-left text-white">
					<el-checkbox v-model="checked1" size="large">
						<template #default>
							<span class="text-white">发生中</span>
						</template>
					</el-checkbox>
					<el-checkbox v-model="checked2" size="large">
						<template #default>
							<span class="text-white">停止</span>
						</template>
					</el-checkbox>
				</div>
			</template>
		</pol-title>
		<div class="border-solid bg-tm radius-sm padding-lg">
			<pol-table ref="polTableRef" v-bind="tableOpt2"></pol-table>
		</div>


		<!-- 事件列表弹窗 -->
		<el-dialog v-model="dialogHeatScheduleEdit" title="质量事件列表" width="1200">
			<pol-table ref="polTableRef2" v-bind="tableOpt2" height="600px" cellClassName="cellClass"></pol-table>
		</el-dialog>

		<crystallizerPopup ref="crystallizerPopupRef" @rowClick="rowClick"></crystallizerPopup>
	</div>
</template>

<script setup>
	import sketchMap from '../dashboard/components/sketchMap.vue'
	import crystallizerPopup from '../produceTracking/components/crystallizerPopup.vue' //选择结晶器
	import { ref } from 'vue';

	//搜素数据
	const searchForm = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
	});

	//搜素配置
	const schema = ref({
		CardTypeCode: {
			label: '结晶器浇次',
			slots: {
				customRender: 'CardTypeCode',
			},
			colProps: {
				md: 6,
			},
		}
	});

	function clickSearch() {

	}

	//选择结晶器
	const crystallizerPopupRef = ref(null)
	const selectJJQ = () => {
		crystallizerPopupRef.value.dialogOpen()
	}

	const rowClick = (row) => {
		searchForm.value.CardTypeCode = row.ItemCode
	}

	const checked1 = ref(true)
	const checked2 = ref(false)

	const polTableRef = ref(null); //表格ref


	const dialogHeatScheduleEdit = ref(null)
	const eventListClick = () => {
		dialogHeatScheduleEdit.value = true
	}


	//表格配置
	const columns2 = ref([
		{ label: 'ID编号', key: 'ItemCode', align: 'center', width: '100' },
		{ label: '事件名称', key: 'ItemName', align: 'center' },
		{ label: '开始时间', key: 'ItemValue', align: 'center' },
		{ label: '持续时间（s）', key: 'IsDefault', align: 'center' },
		{ label: '影响范围（以尾部为0点）', key: 'P_IsSys', align: 'center' },
		{ label: '影响长度', key: 'P_IsReadOnly', align: 'center' }
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
			{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
			{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
		]
	});
</script>

<style lang="scss" scoped>
	.close-ico {
		position: absolute;
		right: 16px;
		top: 15px;
		z-index: 2;
	}
</style>